<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">门店详细</block>
		</cu-custom>
		
		<!-- 门店基本信息 -->
		<view class="bg-white">
			<view class="padding solid-bottom flex justify-start align-baseline">
				<view class="text-main title">
					<text class="text-xxl">
						<text class="iconfont icon-mendian"></text>
					</text>
					<text>门店信息</text>
				</view>
			</view>

			<view class="">
				<view class="cu-form-group">
					<view class="title">门店名称</view>
					<view class="text-blue text-bold" @click="navigateToStoreInfo">
						{{astore.sname || '加载中...'}}
					</view>
				</view>
				<view class="cu-form-group" v-if="astore.sheng && astore.shi && astore.qu">
					<view class="title">门店位置</view>
					<view class="location-content">{{astore.sheng}}{{astore.shi}}{{astore.qu}}{{astore.address}}</view>
				</view>
				<view class="cu-form-group" v-else-if="astore.address">
					<view class="title">门店地址</view>
					<view class="location-content">{{astore.address}}</view>
				</view>
			</view>
		</view>

		<!-- 佣金信息 -->
		<view class="margin-top">
			<view class="cu-bar bg-white text-main solid-bottom">
				<view class="action">
					<text class="cuIcon-titles"></text> 佣金记录
				</view>
			</view>
			
			<!-- 有佣金数据时显示 -->
			<view v-if="commissions && commissions.length > 0" class="bg-white">
				<view class="commission-item" v-for="(item,index) in commissions" :key="index">
					<view class="commission-date">¥{{item.amont / 100}}</view>
					<view class="commission-commission">¥{{item.commission / 100}}</view>
				</view>
			</view>
			
			<!-- 无佣金数据时显示 -->
			<view v-else class="bg-white padding text-center text-gray">
				<text class="iconfont icon-empty" style="font-size: 100rpx;"></text>
				<view>暂无佣金记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				// 门店信息
				astore: {
					storeid: "",
					sname: ""
				},
				// 佣金记录
				commissions: []
			};
		},
		onLoad: function(option) {
			if (!option.storeid) {
				this.message.confirm({
					content: "门店ID不存在",
					showCancel: false,
					complete: () => {
						uni.navigateBack();
					}
				});
			}
			this.astore.storeid = option.storeid;

			this.getMd();
		},
		methods: {
			getMd: function() {
				// 确保使用正确的API路径和参数名
				this.api("/commission/items").send({
					storeid: this.astore.storeid // 参数名与后端一致
				}).then(data => {
					// 更新门店信息
					if (data.astore) {
						this.astore = data.astore;
					}
					
					this.commissions = data.commissions;
				});
			},
			
			// 添加跳转到门店信息页面的方法
			navigateToStoreInfo: function() {
				uni.navigateTo({
					url: '/pages/cdz/md/mdxx?storeid=' + this.astore.storeid
				});
			}
		}
	}
</script>

<style>
.commission-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
}
.commission-date {
    color: #888;
}
.commission-commission {
    color: #e54d42;
    font-weight: bold;
}
.text-gray {
    color: #8799a3;
    padding: 40rpx 0;
}
.icon-empty {
    font-size: 120rpx;
    display: block;
    margin-bottom: 20rpx;
}
.text-blue {
    color: #0081ff;
}
.text-bold {
    font-weight: bold;
}
.text-blue:active {
    opacity: 0.7;
}
.location-content {
    flex: 1;
    margin-left: 20rpx;
    word-break: break-all;
    line-height: 1.6;
    text-align: right;
}
.cu-form-group .title {
    width: 160rpx;
    flex-shrink: 0;
}
</style>